<template>
  <div class="container">
<!--    <Category title="美食">-->
<!--      <img src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422" alt="" >-->
<!--      <ul slot="footer" v-for="(item,index) in foods" :key="index">-->
<!--        <li>{{item}}</li>-->
<!--      </ul>-->
<!--      </Category>-->
<!--    <Category title="电影">-->
<!--      <template v-slot:footer >-->
<!--        <a href="https://www.bilibili.com/video/BV1j54y1X7jc?p=1">哔哩哔哩</a>-->
<!--        <a href="https://www.bilibili.com/video/BV1j54y1X7jc?p=1">哔哩哔哩1</a>-->
<!--        <a href="https://www.bilibili.com/video/BV1j54y1X7jc?p=1">哔哩哔哩2</a>-->
<!--      </template>-->

<!--      <ul v-for="(item,index) in moves" :key="index">-->
<!--        <li>{{item}}</li>-->
<!--      </ul>-->
<!--    </Category>-->

    <Category title="游戏">
      <template scope="scopeData">
        <ul>
          <li v-for="g in scopeData.games" :key="g">{{g}}</li>
        </ul>
      </template>
    </Category>
    <Category title="游戏">
      <template scope="scopeData">
        <ol>
          <li v-for="g in scopeData.games" :key="g">{{g}}</li>
        </ol>
      </template>
    </Category>
    <Category title="游戏">
      <template scope="scopeData">
        <h4 v-for="g in scopeData.games" :key="g">{{g}}
        </h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category'

export default {
  name: 'App',
  components: {
    Category
  },
  data() {
    return {
      // foods: ['火锅', '烤肉', '烤鸡'],
      // games: ['穿越火线','英雄联盟','王者荣耀'],
      // moves: ['战狼2','流浪地球','流浪地球2']
    }
  },
  methods: {

  },
  computed: {

  },
  mounted() {

  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: space-around;
}
img {
  width: 100%;
  height: 50%;
}
</style>
